<template>
	<view>
		<view class="g_list">
			<view class="types">
				<view :class="{'type_active':selectId==0}" @click="changeType(0)">图片</view>
				<view :class="{'type_active':selectId==1}" @click="changeType(1)">视频</view>
			</view>
			<view class="g_container">
				<view class="g_item" @click="uplaodThumb" v-show="selectId==0">
					<image class="reaname_thumb_upload" src="/static/shizi.jpg" mode=""></image>
				</view>
				<view class="g_item" @click="uplaodThumb" v-show="selectId==1">
					<image class="reaname_thumb_upload" src="/static/shizi.jpg" mode=""></image>
				</view>
			</view>
			<!-- <view class="g_container">
				<view class="g_imgs">
					<view class="g_item" v-for="(item,index) in imgs">
						<image :src="item" mode=""></image>
						<text @click="deleteThumb(index)">×</text>
					</view>
				</view>
			</view> -->
			<view class="g_container" v-for="(item,index) in list" v-if="list.length>0">
				<view class="g_tit">{{item.title}}</view>
				<view class="g_imgs">
					<view class="g_item" v-for="(itm,idx) in item.list">
						<block v-if="selectId==1">
							<video :src="itm.url"></video>
						</block>
						<block v-if="selectId==0">
							<image :src="itm.url" mode="" @click="previewImg(0,itm.url)"></image>
						</block>
						<text @click="deleteImg(index,idx,itm.id)">×</text>
					</view>
				</view>
			</view>
			<view class="none_data" v-else>暂未上传图片</view>
			<!-- <button type="warn" class="g_btn" @click="submit">提交</button> -->
			<view class="empty_loading">
				<image v-show="isloading" src="/static/business/loading.gif" mode=""></image>
				<text v-show="isempty">没有更多了~</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uid: 0,
				imgs: [],
				page: 0,
				list: [],
				isempty: false,
				isloading: false,
				selectId: 0,
			};
		},
		onLoad(options){
			this.uid = options.id;
			this.getImgs();
		},
		onReachBottom() {
			this.getImgs();
		},
		methods: {
			changeType(id){
				if(id == this.selectId) return;
				this.selectId = id;
				this.page = 0;
				this.list = [];
				this.getImgs();
			},
			submit(){
				uni.showLoading({
					title: '上传中,请稍后'
				});
				setTimeout(()=>{
					this.$axios('picwarehouse/submit','POST','supplier',{
						url: this.imgs,
						uid: this.uid,
						type: this.selectId
					}).then(res=>{
						uni.hideLoading();
						if(res.data.code == 200){
							this.$api.msg(res.data.data);
							this.imgs = [];
							this.page = 0;
							this.list = [];
							this.getImgs();
						}
					})
				},500)
			},
			getImgs(){
				this.page++;
				this.isloading = true;
				this.$axios('picwarehouse/lists','POST','supplier',{
					page: this.page,
					uid: this.uid,
					type: this.selectId
				}).then(res=>{
					this.isloading = false;
					if(res.data.code == 200){
						this.list = [...this.list,...res.data.data];
						this.isempty = res.data.data.length <= 0;
					}
				})
			},
			deleteImg(idx,idx1,id){
				this.$axios('picwarehouse/delete','POST','supplier',{
					id,
					uid: this.uid
				}).then(res=>{
					if(res.data.code == 200){
						this.$api.msg(res.data.data);
						this.list[idx].list.splice(idx1, 1);
					}
				})
			},
			deleteThumb(idx) {
				this.imgs.splice(idx, 1);
			},
			uplaodThumb() {
				var that = this;
				let arr = '';
				let token = uni.getStorageSync('token');
				let url = '';
				let type;
				if(this.selectId==0){
					type = 'image';
				}else{
					type = 'video';
				}
				uni.chooseMedia({
					count: 9,
					mediaType: [type],
					success(res) {
						uni.showLoading({
							title: '上传中,请稍后'
						});
						console.log(res);
						// return;
						for (let i in res.tempFiles) {
							if(res.tempFiles[i].fileType =='image'){
								url = that.$url.state.url.upload;
							}else if(res.tempFiles[i].fileType=='video'){
								url = that.$url.state.url.uploadvod;
							}
							// console.log(url);
							// return;
							uni.uploadFile({
								url: url,
								filePath: res.tempFiles[i].tempFilePath,
								name: 'a',
								header: {
									token
								},
								formData: {
									'file': 'a'
								},
								success(upres) {
									var data = JSON.parse(upres.data);
									if (data.code == 200) {
										arr = data.data.url;
										that.imgs.push(arr);
									} else {
										that.$api.msg(data.data)
									}
								},
								fail() {
									setTimeout(() => {
										that.$api.msg('上传失败，请重试')
									}, 100)
								},
								complete() {
									if (i == res.tempFiles.length - 1) {
										uni.hideLoading();
										that.submit()
									}
								}
							})
						}
					},
				})
			},
			// 预览图片
			previewImg(idx,arr){
				if(typeof arr === 'string'){
					let arrs = [];
					arrs.push(arr);
					arr = arrs;
				}
				uni.previewImage({
					current: idx,
					urls: arr
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.g_list{
		padding: 20rpx;
		padding-bottom: 160rpx;
	}
	.types{
		display: flex;
		justify-content: space-around;
		font-size: 32rpx;
		.type_active{
			position: relative;
			&::after {
				content: '';
				position: absolute;
				left: 48%;
				bottom: -2upx;
				transform: translateX(-50%);
				width: 100%;
				height: 12rpx;
				background: linear-gradient( 90deg, #BB2FF2 0%, #8615E1 100%);
				border-radius: 4rpx;
				opacity: .8;
			}
		}
	}
	.g_container{
		width: 100%;
		margin-bottom: 16rpx;
		.g_imgs{
			display: flex;
			align-items: flex-start;
			flex-wrap: wrap;
			margin-right: -10rpx;
		}
	}
	.g_item {
		height: 160rpx;
		margin: 20rpx 10rpx 0 0;
		position: relative;
		width: 23.5%;
		image,video {
			height: 100%;
			width: 100%;
		}
		text {
			background: #999;
			border-radius: 50%;
			color: #fff;
			height: 50upx;
			line-height: 40upx;
			font-size: 40upx;
			position: absolute;
			top: -10upx;
			right: -10upx;
			text-align: center;
			width: 50upx;
			opacity: .8;
		}
	}
	.g_btn{
		box-shadow: 4rpx 5rpx 17rpx 7rpx #ddd;
		background: $bg-color;
		position: fixed;
		bottom: 50rpx;
		width: 92%;
		left: 0;
		right: 0;
	}
</style>
